<template>
  <div>
    <div class="searchHead">
      <el-input
          v-model="inputSearch"
          placeholder="请输入搜索条件"
          class="input-with-select"
          clearable
      >
        <template #prepend>
          <el-select v-model="select" placeholder="请选择搜索项" style="width: 130px">
            <el-option label="作品名称" value="1"/>
            <el-option label="参与交易者" value="2"/>
            <el-option label="交易哈希" value="3"/>
          </el-select>
        </template>
        <template #append>
          <el-button @click="search">搜索</el-button>
        </template>
      </el-input>
    </div>
    <el-button type="primary"
               class="highlySearch" @click="dialogTableVisible=true">高级搜索
    </el-button>
    <el-table :data="tableData" style="width: 100%" height="800"
              :header-cell-style="{background:'#fdfdfd',color:'#409eff',textAlign: 'center'}"
              :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="goodsName" label="商品名称" width="180" sortable/>
      <el-table-column prop="tradeTime" label="交易时间" width="180" sortable/>
      <el-table-column prop="goodsType" label="作品类别" width="180"
                       :filters="[
            {text:'摄影作品' , value:'摄影作品' },
            {text:'文字作品' , value:'文字作品' },
            {text:'美术作品' , value:'美术作品' },
      ]"
                       :filter-method="filterByWorkKind"

      />
      <el-table-column prop="tradeType" label="交易类别" width="180"
                       :filters="[
          {text:'所有权交易',value:'所有权'},
          {text:'使用权交易',value:'使用权'}
      ]"
                       :filter-method="filterByTradeKind"
      />
      <el-table-column prop="sellName" label="出售方" width="180"/>
      <el-table-column prop="buyName" label="购买方" width="180"/>
      <el-table-column prop="price" label="交易金额" width="180" sortable/>
      <el-table-column prop="txHash" label="交易哈希" width="300"/>
    </el-table>

    <el-dialog v-model="dialogTableVisible" title="高级搜索" draggable="true">
      <div class="trader"><strong>交易人筛选</strong></div>
      <el-tooltip content="如果对某些选项不做输入,则对于该选项不做限制" placement="top">
        <el-button class="searchTip">?</el-button>
      </el-tooltip>
      <br>
      <div class="trader">购买者</div>
      <el-input v-model="buyer" placeholder="请输入购买者的用户名" style="display: inline;margin-left: 45px"/>
      <br>
      <div class="trader">出售者</div>
      <el-input v-model="seller" placeholder="请输入出售者的用户名" style="display: inline;margin-left: 45px"/>
      <br>
      <br>
      <div><strong>交易内容筛选</strong></div>
      <br>
      <div class="trader">交易时间范围</div>
      <el-date-picker
          v-model="tradeStartTime"
          type="date"
          placeholder="请输入起始时间"
          style="width: 200px;margin-left: 8px"
          value-format="YYYY-MM-DD"
      />
      --------
      <el-date-picker
          v-model="tradeEndTime"
          type="date"
          placeholder="请输入截至时间"
          style="width: 200px"
          value-format="YYYY-MM-DD"
      />
      <br>
      <div class="trader">交易价格范围</div>
      <el-input v-model="minPrice" placeholder="请输入最低价格" style="display: inline;margin-right:0px"/>
      --------
      <el-input v-model="maxPrice" placeholder="请输入最高价格" style="display: inline;margin:0px"/>
      <br>
      <br>
      <el-button style="margin-left: 80%" @click="dialogTableVisible2=true">重置</el-button>
      <el-button type="primary" style="margin-left: 20px" @click="confirm">确认</el-button>
    </el-dialog>
    <el-dialog v-model="dialogTableVisible2" title="确认重置" width="20%" height="20%" draggable="true">
      <el-button @click="dialogTableVisible2=false" style="margin-left: 50%">取消</el-button>
      <el-button @click="confirmExit" type="primary">确认</el-button>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "trade-record-manager",
  data() {
    return {
      dialogTableVisible2: false,
      select: '',
      inputSearch: '',
      tableData: [],
      dialogTableVisible: false,
      buyer: '',
      seller: '',
      minPrice: '',
      maxPrice: '',
      nftChoice: '',
      options: ["美术作品", "摄影作品", "文字作品"],
      tradeStartTime: '',
      tradeEndTime: ''
    }
  },
  methods: {
    filterByWorkKind(value, row) {
      return row.goodsType === value
    },
    filterByTradeKind(value, row) {
      return row.tradeType === value
    }
    ,
    search() {
      if (this.inputSearch === '') {
        this.$message.error('请输入搜索内容')
      } else if (this.select === '') {
        this.$message.error('请选择搜索项')
      } else {
        let array = []
        let newArray = []
        for (let i = 0; i < this.inputSearch.length; i++) {
          if (this.inputSearch[i] !== ' ') {
            array.push(this.inputSearch[i])
          }
        }
        if (this.select == 1) {
          for (let i = 0; i < this.tableData.length; i++) {
            let f = false
            for (let j = 0; j < array.length; j++) {
              if (this.tableData[i].goodsName.search(array[j]) !== -1) {
                f = true
                break
              }
            }
            if (f) {
              newArray.push(this.tableData[i])
              console.log(newArray)
            }
          }
          this.tableData = newArray
        } else if (this.select == 2) {
          for (let i = 0; i < this.tableData.length; i++) {
            let f = false
            for (let j = 0; j < array.length; j++) {
              if (this.tableData[i].sellName.search(array[j]) !== -1 || this.tableData[i].buyName.search(array[j]) !== -1) {
                f = true
                break
              }
            }
            if (f) {
              newArray.push(this.tableData[i])
              console.log(newArray)
            }
          }
          this.tableData = newArray
        } else if (this.select == 3) {
          for (let i = 0; i < this.tableData.length; i++) {
            let f = false
            if (this.tableData[i].txHash == this.inputSearch) {
              f = true
            }
            if (f) {
              newArray.push(this.tableData[i])
            }
          }
          this.tableData = newArray
        }
      }
    },
    confirmExit() {
      this.dialogTableVisible = false
      this.dialogTableVisible2 = false
      this.seller = ''
      this.buyer = ''
      this.maxPrice = ''
      this.minPrice = ''
      this.tradeStartTime = ''
      this.tradeEndTime = ''
      this.nftChoice = ''
      this.tableData = JSON.parse(sessionStorage.getItem('allTrade'))
    },
    confirm() {
      if (this.seller !== '') {
        console.log('seller')
        console.log(this.seller)
        this.tableData = this.tableData.filter((val) => {
          return val.sellName === this.seller
        })
      }
      if (this.buyer !== '') {
        console.log('buyer')
        this.tableData = this.tableData.filter((val) => {
          return val.buyName === this.buyer
        })
      }
      if (this.tradeStartTime !== '' && this.tradeEndTime === '') {
        this.tableData = this.tableData.filter((val) => {
          return val.tradeTime >= this.tradeStartTime
        })
      } else if (this.tradeStartTime === '' && this.tradeEndTime !== '') {
        this.tableData = this.tableData.filter((val) => {
          return val.tradeTime <= this.tradeEndTime
        })
      } else if (this.tradeStartTime !== '' && this.tradeEndTime !== '') {
        this.tableData = this.tableData.filter((val) => {
          return val.tradeTime >= this.tradeStartTime && val.tradeTime <= this.tradeEndTime
        })
      }
      if (this.minPrice !== '' && this.maxPrice === '') {
        console.log('min')
        this.tableData = this.tableData.filter((val) => {
          return val.price >= this.minPrice
        })
      } else if (this.minPrice === '' && this.maxPrice !== '') {
        console.log('max')
        this.tableData = this.tableData.filter((val) => {
          return val.price <= this.maxPrice
        })
      } else if (this.minPrice !== '' && this.maxPrice !== '') {
        console.log('double')
        this.tableData = this.tableData.filter((val) => {
          return val.price >= this.minPrice && val.price <= this.maxPrice
        })
      }
      this.dialogTableVisible = false
    }
  },
  watch: {
    inputSearch(newV) {
      if (newV === '') {
        console.log('newV is null')
        this.tableData = JSON.parse(sessionStorage.getItem('allTrade'))
      }
    }
  },
  beforeCreate() {
    axios.get("http://120.48.51.66:8081/trade/getAllTrade").then((response) => {
      console.log(response.data)
      sessionStorage.setItem("allTrade", (JSON).stringify(response.data.data.tradeList))
      this.tableData = JSON.parse(sessionStorage.getItem('allTrade'))
      console.log(this.tableData)
    }).catch((e) => {
      console.log(e)
    })
  }
}
</script>

<style scoped>

div {
  margin: 10px;
}

.searchHead {
  width: 1200px;
  display: inline-block;
}

.highlySearch {
  margin-left: 80%;
  position: relative;
  top: -52px;
}

.highlySearch:hover {
  transform: scale(1.1);
}

.trader {
  display: inline-block;
  margin-right: 30px;
}

.searchTip {
  margin-left: 80%;
}

.nftChoice {
  width: 240px;
  margin-left: 200px;
}

</style>